<?php
function isNumber($var) {
	if(strlen($var)==0) {
		return false;
	}
	for ($i=0;$i<strlen($var);$i++) {
		if ( substr_count ("0123456789", substr ($var, $i, 1) ) == 0 ) {
		return false;
		}
	}
	return true;
}
(isset($_GET['sw'])  && isNumber($_GET['sw']))  ? $sw  = $_GET['sw']  : $sw   = 200;
(isset($_GET['asw']) && isNumber($_GET['asw'])) ? $asw = $_GET['asw'] : $asw  = 200;
(isset($_GET['ww'])  && isNumber($_GET['ww']))  ? $ww  = $_GET['ww']  : $ww   = 'auto';
if($ww != 'auto') :
	switch ($_GET['unit']) :
		case 'px':
			$wrapping = $ww.'px';
		break;
		case 'per':
			$wrapping = $ww.'%';
		break;
		default:
			$wrapping = 'auto';
		break;
	endswitch;
else :
	$wrapping = $ww;
endif;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>步步街Hybrid布局演示</title>
<link rel="stylesheet" href="./?css=h&n1=<?php echo $sw; ?>&n2=<?php echo $asw; ?>&wrapping=<?php echo $wrapping; ?>" />
<style type="text/css">
body{font-size:14px;line-height:20px;margin:0;padding:0;}
h1{ line-height:2em;margin:0; }
div.content {
	display:block;
	border:1px solid #666666;
	overflow:hidden;
	text-align:center;
	background:#F1F1F1;
	font-weight: bold;
	background:#F9F9F4 url(./img/grid_text.png) 1px 0 repeat;
	margin-right:0px;
}
.wrapping {
	padding:3px 0;
	padding-left:0px;
	padding-right:0px;
}
address *{vertical-align:middle;font-family:Dotum;}
</style>
</head>
<body>
<div class="wrapping"><h1>步步街Hybrid布局演示</h1></div>
<hr />
<div class="wrapping">
  <form action="" method="get">
    <table>
      <tr>
        <td><label for="sw">主侧边宽度：</label></td>
        <td><input type="text" name="sw" value="<?php echo $sw; ?>" id="sw"/></td>
        <td>单位：像素</td>
      </tr>
      <tr>
        <td><label for="asw">符侧边宽度：</label></td>
        <td><input type="text" name="asw" value="<?php echo $asw; ?>" id="asw"/></td>
        <td>单位：像素</td>
      </tr>
      <tr>
        <td><label for="ww">外套宽度：</label></td>
        <td><input type="text" name="ww" value="<?php echo $ww; ?>" id="ww"/></td>
        <td><label for="unit">单位：</label>
          <select name="unit" id="unit" size="1">
<?php
if($ww != 'auto') :
	switch ($_GET['unit']) :
		case 'px':
			echo   "".'            <option value="px" selected>像素</option>
            <option value="per">百分比</option>';
		break;
		case 'per':
			echo   "".'            <option value="px">像素</option>
			<option value="per" selected>百分比</option>';
		break;
	endswitch;
else :
	echo   "".'            <option value="px">像素</option>
            <option value="per">百分比</option>';
endif;
?>

            <!--option value="px">像素</option-->
            <!--option value="per">百分比</option-->
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="3"><input type="submit" name="" value="提交" id=""/></td>
      </tr>
    </table>
  </form>
</div>
<hr />
<div class="wrapping"><h2>步步街Hybrid布局L模式演示</h2></div>
<hr />
  <div class="wrapping m">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mn">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nm">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mnn">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nmn">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nnm">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
    </div>
  </div>
<hr />
<div class="wrapping"><h2>步步街Hybrid布局T模式演示</h2></div>
<hr />
<div id="bbody">
  <div class="wrapping m">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mn">
    <div class="filling">
      <div class="n1"><div class="content">n-default</div></div>
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nm">
    <div class="filling">
      <div class="n1"><div class="content">n-default</div></div>
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mnn">
    <div class="filling">
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nmn">
    <div class="filling">
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nnm">
    <div class="filling">
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
    </div>
  </div>
</div>
<hr />
<div class="wrapping"><h2>步步街Hybrid布局7模式演示</h2></div>
<hr />
  <div class="wrapping m">
    <div class="filling">
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mn">
    <div class="filling">
      <div class="n1"><div class="content">n-default</div></div>
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nm">
    <div class="filling">
      <div class="n1"><div class="content">n-default</div></div>
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping mnn">
    <div class="filling">
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nmn">
    <div class="filling">
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
  <hr />
  <div class="wrapping nnm">
    <div class="filling">
      <div class="n1"><div class="content">n1-default</div></div>
      <div class="n2"><div class="content">n2-default</div></div>
      <div class="ming"><div class="content">m-default</div></div>
    </div>
  </div>
<hr />
<div class="wrapping">
  <div id="colophon">
    <address style="text-align:center;">
      <img src="./img/logo_16px.gif" alt="" />&nbsp;<em>Copyright ©</em> <span><a href="http://www.bubujie.net/" target="_blank">步步街工作室</a> 2008-2012 All Rights Reserved.</span>
    </address>
  </div>
</div>
</body>
</html>
